<template>
    <div class="work-order-container">
        <!-- 顶部操作栏 -->
        <div class="action-bar">
            <div class="flex items-center space-x-4">
                <el-button type="text" @click="handleEdit">
                    <i class="fa fa-edit mr-1"></i>编辑
                </el-button>
                <el-button type="text" @click="handleDelete">
                    <i class="fa fa-trash mr-1"></i>删除
                </el-button>
                <el-button type="primary" @click="handleUpload">
                    <i class="fa fa-cloud-upload mr-1"></i>上线
                </el-button>
                <el-button @click="handleClose">
                    <i class="fa fa-times mr-1"></i>关闭
                </el-button>
            </div>
        </div>

        <!-- 主体内容区域 -->
        <div class="main-content">
            <!-- 左侧主要内容 -->
            <div class="left-section">
                <!-- 选项卡 -->
                <el-tabs v-model="activeTab" class="mb-6">
                    <el-tab-pane label="工单信息" name="info">
                        <!-- 基础信息卡片 -->
                        <el-card>
                            <template #header>
                                <div class="flex justify-between items-center">
                                    <h3 class="text-lg font-semibold">基础信息</h3>
                                    <el-tag :type="getStatusType(workOrder.baseInfo.status)">{{
                                        workOrder.baseInfo.status }}</el-tag>
                                </div>
                            </template>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4"> <!-- 调整为响应式网格 -->
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-28">工单编号：</span>
                                    <span class="font-medium">{{ workOrder.baseInfo.workOrderNo }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-28">工单名称：</span>
                                    <span class="font-medium">{{ workOrder.baseInfo.name }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-28">单据时间：</span>
                                    <span class="font-medium">{{ workOrder.baseInfo.docTime }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-28">关联单号：</span>
                                    <span class="font-medium">{{ workOrder.baseInfo.productionNo }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-28">创建人：</span>
                                    <span class="font-medium">{{ workOrder.baseInfo.creator }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-28">创建时间：</span>
                                    <span class="font-medium">{{ workOrder.baseInfo.createTime }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-28">审批人：</span>
                                    <span class="font-medium">{{ workOrder.baseInfo.approver }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-28">审批时间：</span>
                                    <span class="font-medium">{{ workOrder.baseInfo.approveTime }}</span>
                                </div>
                            </div>
                        </el-card>

                        <!-- 生产物品卡片 -->
                        <el-card>
                            <template #header>
                                <h3 class="text-lg font-semibold">生产物品</h3>
                            </template>
                            <div class="grid grid-cols-2 gap-4 p-4">
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-24">产品名称：</span>
                                    <span class="font-medium">{{ workOrder.product.name }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-24">产品编号：</span>
                                    <span class="font-medium">{{ workOrder.product.code }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-24">规格型号：</span>
                                    <span class="font-medium">{{ workOrder.product.spec }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-24">单位：</span>
                                    <span class="font-medium">{{ workOrder.product.unit }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-24">材料：</span>
                                    <span class="font-medium">{{ workOrder.product.material }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-24">图纸编号：</span>
                                    <span class="font-medium">{{ workOrder.product.drawingNo }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-24">版本：</span>
                                    <span class="font-medium">{{ workOrder.product.version }}</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-gray-500 w-24">重量：</span>
                                    <span class="font-medium">{{ workOrder.product.netWeight }}kg</span>
                                </div>
                            </div>
                        </el-card>

                        <!-- 工序流程卡片 -->
                        <el-card>
                            <template #header>
                                <div class="flex justify-between items-center">
                                    <h3 class="text-lg font-semibold">工序流程</h3>
                                    <el-button size="small" type="primary" @click="handleAddProcess">
                                        <i class="fa fa-plus mr-1"></i>新增工序
                                    </el-button>
                                </div>
                            </template>
                            <el-table :data="workOrder.processList" stripe style="width: 100%">
                                <el-table-column type="index" label="序号" width="50"></el-table-column>
                                <el-table-column prop="processCode" label="工序编号"></el-table-column>
                                <el-table-column prop="processName" label="工序名称"></el-table-column>
                                <el-table-column prop="startTime" label="开始时间"></el-table-column>
                                <el-table-column prop="endTime" label="结束时间"></el-table-column>
                                <el-table-column prop="responsiblePerson" label="负责人"></el-table-column>
                                <el-table-column prop="status" label="状态">
                                    <template #default="scope">
                                        <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="120">
                                    <template #default="scope">
                                        <el-button type="text" size="small"
                                            @click="handleProcessAction(scope.row)">详情</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>

                        <!-- 附件卡片 -->
                        <el-card>
                            <template #header>
                                <div class="flex justify-between items-center">
                                    <h3 class="text-lg font-semibold">附件</h3>
                                    <el-button size="small" type="primary" @click="handleUploadFile">
                                        <i class="fa fa-upload mr-1"></i>上传附件
                                    </el-button>
                                </div>
                            </template>
                            <div class="p-4">
                                <el-empty v-if="workOrder.attachments.length === 0" description="暂无附件"></el-empty>
                                <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div v-for="file in workOrder.attachments" :key="file.id"
                                        class="bg-gray-50 rounded-lg p-3 border border-gray-100 hover:shadow-sm transition">
                                        <div class="flex items-start">
                                            <i :class="getFileIconClass(file.name)"
                                                class="text-2xl text-gray-400 mr-3 mt-1"></i>
                                            <div class="flex-1">
                                                <div class="font-medium text-sm truncate">{{ file.name }}</div>
                                                <div class="text-xs text-gray-500 mt-1">{{ file.size }}</div>
                                                <div class="text-xs text-gray-500">{{ file.date }}</div>
                                            </div>
                                        </div>
                                        <div class="flex justify-end mt-2">
                                            <el-button size="mini" type="text" @click="handleDownload(file)">
                                                <i class="fa fa-download"></i>下载
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane label="生产进度" name="progress">
                        <!-- 生产进度内容 -->
                        <el-card>
                            <div class="p-6 text-center">
                                <el-progress :percentage="progressPercentage" :color="progressColor" type="circle"
                                    :width="140"></el-progress>
                                <div class="mt-4 text-lg font-medium">整体进度：{{ progressPercentage }}%</div>
                            </div>

                            <el-timeline class="mt-6 p-4">
                                <el-timeline-item v-for="(step, index) in productionSteps" :key="index"
                                    :timestamp="step.time"
                                    :type="step.status === '完成' ? 'success' : step.status === '进行中' ? 'primary' : 'info'">
                                    <div class="font-medium">{{ step.name }}</div>
                                    <div class="text-sm text-gray-500 mt-1">{{ step.description }}</div>
                                </el-timeline-item>
                            </el-timeline>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane label="质量检验" name="quality">
                        <!-- 质量检验内容 -->
                        <el-card>
                            <template #header>
                                <div class="flex justify-between items-center">
                                    <h3 class="text-lg font-semibold">检验记录</h3>
                                    <el-button size="small" type="primary" @click="handleAddInspection">
                                        <i class="fa fa-plus mr-1"></i>新增检验
                                    </el-button>
                                </div>
                            </template>
                            <el-table :data="inspectionRecords" stripe style="width: 100%">
                                <el-table-column prop="inspectionDate" label="检验日期"></el-table-column>
                                <el-table-column prop="inspector" label="检验员"></el-table-column>
                                <el-table-column prop="result" label="检验结果">
                                    <template #default="scope">
                                        <el-tag :type="scope.row.result === '合格' ? 'success' : 'danger'">{{
                                            scope.row.result }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="120">
                                    <template #default="scope">
                                        <el-button type="text" size="small"
                                            @click="handleViewInspection(scope.row)">查看</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane label="文档记录" name="documents">
                        <!-- 文档记录内容 -->
                        <el-card>
                            <template #header>
                                <div class="flex justify-between items-center">
                                    <h3 class="text-lg font-semibold">文档记录</h3>
                                    <el-button size="small" type="primary" @click="handleAddDocument">
                                        <i class="fa fa-plus mr-1"></i>新增文档
                                    </el-button>
                                </div>
                            </template>
                            <el-table :data="documentRecords" stripe style="width: 100%">
                                <el-table-column prop="documentName" label="文档名称"></el-table-column>
                                <el-table-column prop="createDate" label="创建日期"></el-table-column>
                                <el-table-column prop="creator" label="创建人"></el-table-column>
                                <el-table-column label="操作" width="120">
                                    <template #default="scope">
                                        <el-button type="text" size="small"
                                            @click="handleViewDocument(scope.row)">查看</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-tab-pane>

                    <el-tab-pane label="备注信息" name="notes">
                        <!-- 备注信息内容 -->
                        <el-card>
                            <div class="p-4">
                                <el-input type="textarea" :rows="6" v-model="notes" placeholder="请输入备注信息"
                                    @change="saveNotes"></el-input>
                                <div class="mt-4 text-right">
                                    <el-button type="primary" @click="saveNotes">保存备注</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <!-- 右侧报工面板 -->
            <div class="right-panel">
                <!-- 报工信息 -->
                <el-card>
                    <template #header>
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-semibold">报工信息</h3>
                            <el-button size="small" type="text" @click="clearReportForm">
                                <i class="fa fa-refresh"></i>
                            </el-button>
                        </div>
                    </template>
                    <div class="p-4">
                        <el-form :model="selectedProcess" label-width="80px">
                            <el-form-item label="工单编号">
                                <el-input v-model="selectedProcess.workOrderNo" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="工序名称">
                                <el-input v-model="selectedProcess.processName" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-input v-model="selectedProcess.responsiblePerson" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="部门">
                                <el-select v-model="selectedProcess.department" placeholder="请选择部门">
                                    <el-option label="总装车间" value="总装车间"></el-option>
                                    <el-option label="零件加工车间" value="零件加工车间"></el-option>
                                    <el-option label="质检部" value="质检部"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>

                        <div class="report-actions mt-4 mb-4">
                            <el-button type="primary" size="small" @click="addRow">
                                <i class="fa fa-plus mr-1"></i>添加
                            </el-button>
                            <el-button type="danger" size="small" @click="removeRow">
                                <i class="fa fa-minus mr-1"></i>移除
                            </el-button>
                        </div>

                        <el-table :data="reportRows" style="width: 100%">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" label="序号" width="50"></el-table-column>
                            <el-table-column label="人员">
                                <template #default="scope">
                                    <el-select v-model="scope.row.worker" placeholder="请选择人员">
                                        <el-option label="张三" value="张三"></el-option>
                                        <el-option label="李四" value="李四"></el-option>
                                        <el-option label="王五" value="王五"></el-option>
                                        <el-option label="赵六" value="赵六"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="报工数量">
                                <template #default="scope">
                                    <el-input v-model="scope.row.quantity" type="number" placeholder="请输入数量"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="完成时间">
                                <template #default="scope">
                                    <el-date-picker v-model="scope.row.completeTime" type="datetime"
                                        placeholder="选择日期时间"></el-date-picker>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="mt-6">
                            <el-button type="primary" class="w-full" @click="submitReport"
                                :disabled="!selectedProcess.processName || reportRows.length === 0 || !validateReportRows()">
                                <i class="fa fa-check mr-1"></i>提交报工
                            </el-button>
                        </div>
                    </div>
                </el-card>

                <!-- 历史报工记录 -->
                <el-card>
                    <template #header>
                        <h3 class="text-lg font-semibold">历史报工记录</h3>
                    </template>
                    <div class="p-4">
                        <el-table :data="historyReports" style="width: 100%">
                            <el-table-column prop="date" label="日期"></el-table-column>
                            <el-table-column prop="worker" label="人员"></el-table-column>
                            <el-table-column prop="quantity" label="数量"></el-table-column>
                            <el-table-column label="操作" width="80">
                                <template #default="scope">
                                    <el-button type="text" size="small"
                                        @click="handleViewHistory(scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 模拟工单数据
const workOrder = ref({
    baseInfo: {
        workOrderNo: 'CG-20220607-0001',
        name: '生产工单05465',
        docTime: '2022-06-07 21:23:45',
        productionNo: 'SC-20220607-0012',
        status: '进行中',
        creator: '张三',
        createTime: '2022-06-07 21:23:45',
        approver: '李四',
        approveTime: '2022-06-07 22:30:15',
        department: '生产部',
        processType: '装配',
        planStartTime: '2022-06-08 08:00:00',
        planEndTime: '2022-06-15 18:00:00',
        actualStartTime: '2022-06-08 08:30:00',
        actualEndTime: '',
        priority: '中',
        workCenter: 'WC-001',
        workCenterName: '总装车间',
        processRoute: 'PR-20220607-0001',
        processRouteName: '标准装配流程',
        batchNumber: '20220607001',
        productionQty: 100,
        unit: '件',
        remark: '此工单为新产品试生产'
    },
    product: {
        name: '新产品一',
        code: 'CP-20220607-0001',
        spec: '30*20*50',
        model: 'A-100',
        unit: '件',
        material: '铝合金',
        drawingNo: 'DWG-20220607-0001',
        version: 'V1.0',
        netWeight: 15.5,
        grossWeight: 17.0,
        packageSize: '35*25*55',
        packageQty: 1,
        technicalRequirements: '按照工艺图纸要求生产'
    },
    processList: [
        { processCode: 'PR-001', processName: '原材料检验', status: '完成', startTime: '2022-06-08 08:30:00', endTime: '2022-06-08 10:30:00', responsiblePerson: '王五' },
        { processCode: 'PR-002', processName: '切割与成型', status: '进行中', startTime: '2022-06-08 10:45:00', endTime: '', responsiblePerson: '赵六' },
        { processCode: 'PR-003', processName: '零件加工', status: '下达', startTime: '', endTime: '', responsiblePerson: '孙七' },
        { processCode: 'PR-004', processName: '部件装配', status: '下达', startTime: '', endTime: '', responsiblePerson: '周八' },
        { processCode: 'PR-005', processName: '总装', status: '下达', startTime: '', endTime: '', responsiblePerson: '吴九' },
        { processCode: 'PR-006', processName: '调试', status: '下达', startTime: '', endTime: '', responsiblePerson: '郑十' },
        { processCode: 'PR-007', processName: '检验', status: '下达', startTime: '', endTime: '', responsiblePerson: '钱十一' },
        { processCode: 'PR-008', processName: '包装', status: '下达', startTime: '', endTime: '', responsiblePerson: '孙十二' }
    ],
    attachments: [
        { id: 1, name: '新建文本文件.PDF', size: '0.9KB', date: '2022-08-17 14:26:27' },
        { id: 2, name: '产品图纸.DWG', size: '2.4MB', date: '2022-08-17 14:27:35' },
        { id: 3, name: '工艺流程图.png', size: '1.2MB', date: '2022-08-17 14:28:12' }
    ]
});

// 响应式数据
const activeTab = ref('info');
const page = ref(1);
const totalPage = ref(30);
const progressPercentage = ref(25);
const progressColor = ref('#409EFF');
const notes = ref('');

// 生产进度步骤
const productionSteps = ref([
    { name: '工单创建', status: '完成', time: '2022-06-07 21:23:45', description: '工单已创建并审核通过' },
    { name: '原材料检验', status: '完成', time: '2022-06-08 10:30:00', description: '原材料检验合格，开始生产' },
    { name: '切割与成型', status: '进行中', time: '2022-06-08 10:45:00', description: '正在进行零件切割与成型' },
    { name: '零件加工', status: '未开始', time: '', description: '' },
    { name: '部件装配', status: '未开始', time: '', description: '' },
    { name: '总装', status: '未开始', time: '', description: '' },
    { name: '调试', status: '未开始', time: '', description: '' },
    { name: '检验', status: '未开始', time: '', description: '' },
    { name: '包装', status: '未开始', time: '', description: '' }
]);

// 检验记录
const inspectionRecords = ref([
    { id: 1, inspectionDate: '2022-06-08', inspector: '钱七', result: '合格', description: '原材料检验合格' },
    { id: 2, inspectionDate: '', inspector: '', result: '', description: '' }
]);

// 状态类型映射
const getStatusType = (status) => {
    switch (status) {
        case '完成': return 'success';
        case '进行中': return 'primary';
        case '下达': return 'info';
        case '暂停': return 'warning';
        case '取消': return 'danger';
        default: return 'info';
    }
};

// 方法
const handleEdit = () => {
    ElMessage.info('编辑功能开发中');
};

const handleDelete = () => {
    ElMessageBox.confirm('确定要删除此工单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        ElMessage.success('删除成功');
        // 模拟删除操作后返回上一页
        setTimeout(() => {
            window.history.back();
        }, 1000);
    }).catch(() => {
        ElMessage.info('已取消删除');
    });
};

const handleUpload = () => {
    ElMessage.info('上线功能开发中');
};

const handleClose = () => {
    window.history.back();
};

const handleDownload = (file) => {
    ElMessage.info(`开始下载: ${file.name}`);
    // 实际项目中这里应该调用后端下载接口
};

const handleProcessAction = (process) => {
    ElMessage.info(`查看工序: ${process.processName}`);
};

const handleUploadFile = () => {
    ElMessage.info('文件上传功能开发中');
};

const handleAddInspection = () => {
    ElMessage.info('新增检验功能开发中');
};

const handleViewInspection = (record) => {
    ElMessage.info(`查看检验记录: ${record.inspectionDate}`);
};

const saveNotes = () => {
    ElMessage.success('备注保存成功');
    // 实际项目中这里应该调用后端保存接口
};

// 生命周期钩子
onMounted(() => {
    // 模拟加载数据
    setTimeout(() => {
        // 计算进度百分比
        const completedProcesses = workOrder.value.processList.filter(p => p.status === '完成').length;
        progressPercentage.value = Math.round((completedProcesses / workOrder.value.processList.length) * 100);

        // 更新进度条颜色
        if (progressPercentage.value === 100) {
            progressColor.value = '#67C23A'; // 绿色
        } else if (progressPercentage.value > 75) {
            progressColor.value = '#E6A23C'; // 黄色
        } else {
            progressColor.value = '#409EFF'; // 蓝色
        }
    }, 500);
});
// 右侧面板数据
const selectedProcess = ref({
    workOrderNo: '',
    processCode: '',
    processName: '',
    responsiblePerson: '',
    department: ''
});

const reportRows = ref([{ worker: '', quantity: '', completeTime: new Date() }]);
const historyReports = ref([
    { date: '2022-06-08', worker: '李四', quantity: 25 },
    { date: '2022-06-08', worker: '王五', quantity: 20 }
]);

// 选择工序进行报工
const selectProcess = (process) => {
    selectedProcess.value = {
        workOrderNo: workOrder.value.baseInfo.workOrderNo,
        processCode: process.processCode,
        processName: process.processName,
        responsiblePerson: process.responsiblePerson,
        department: '部门一'
    };

    // 清空并初始化报工行
    reportRows.value = [{ worker: '', quantity: '', completeTime: new Date() }];
};

// 添加行
const addRow = () => {
    reportRows.value.push({ worker: '', quantity: '', completeTime: new Date() });
};

// 移除选中行
const removeRow = () => {
    // 实际项目中应获取选中行进行删除
    if (reportRows.value.length > 1) {
        reportRows.value.pop();
    }
};

// 提交报工
const submitReport = () => {
    const validRows = reportRows.value.filter(row => row.worker && row.quantity);
    if (validRows.length === 0) {
        ElMessage.warning('请填写完整报工信息');
        return;
    }

    // 模拟提交到后端
    const reportData = {
        workOrderNo: selectedProcess.value.workOrderNo,
        processCode: selectedProcess.value.processCode,
        department: selectedProcess.value.department,
        details: validRows
    };

    console.log('提交报工数据:', reportData);

    // 更新历史记录
    validRows.forEach(row => {
        historyReports.value.push({
            date: new Date().toLocaleDateString(),
            worker: row.worker,
            quantity: row.quantity
        });
    });

    ElMessage.success('报工提交成功');

    // 清空表单
    selectedProcess.value = {
        workOrderNo: '',
        processCode: '',
        processName: '',
        responsiblePerson: '',
        department: ''
    };
    reportRows.value = [{ worker: '', quantity: '', completeTime: new Date() }];
};
// 新增方法
const getFileIconClass = (fileName) => {
    const ext = fileName.split('.').pop().toLowerCase();
    switch (ext) {
        case 'pdf': return 'fa fa-file-pdf-o text-red-500';
        case 'doc':
        case 'docx': return 'fa fa-file-word-o text-blue-600';
        case 'xls':
        case 'xlsx': return 'fa fa-file-excel-o text-green-600';
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif': return 'fa fa-file-image-o text-yellow-500';
        case 'zip':
        case 'rar': return 'fa fa-file-archive-o text-purple-500';
        default: return 'fa fa-file-o text-gray-400';
    }
};

const handleAddProcess = () => {
    ElMessage.info('新增工序功能开发中');
};

const clearReportForm = () => {
    selectedProcess.value = {
        workOrderNo: '',
        processCode: '',
        processName: '',
        responsiblePerson: '',
        department: ''
    };
    reportRows.value = [{ worker: '', quantity: '', completeTime: new Date() }];
};

const validateReportRows = () => {
    return reportRows.value.every(row => row.worker && row.quantity && row.completeTime);
};

const handleAddDocument = () => {
    ElMessage.info('新增文档功能开发中');
};

const handleViewDocument = (document) => {
    ElMessage.info(`查看文档: ${document.documentName}`);
};

const handleViewHistory = (history) => {
    ElMessage.info(`查看历史报工: ${history.date} - ${history.worker}`);
};

// 新增数据
const documentRecords = ref([
    { documentName: '生产工艺说明.pdf', createDate: '2022-06-07', creator: '技术部' },
    { documentName: '质量标准.docx', createDate: '2022-06-07', creator: '质检部' }
]);
</script>

<style scoped>
.work-order-container {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e6ebf5;
    padding: 16px 32px;
    /* 增加上下内边距 */
}

.main-content {
    display: flex;
    flex: 1;
}

.left-section {
    flex: 1;
    padding: 32px;
    /* 增加左侧内容区边距 */
    background: #ffffff;
    border-right: 1px solid #e6ebf5;
}

.right-panel {
    width: 560px;
    /* 进一步增加右侧面板宽度 */
    background: #f5f7fa;
    padding: 32px;
    /* 增加右侧内容区边距 */
    overflow-y: auto;
}

.el-card {
    margin-bottom: 24px;
    /* 增加卡片间距 */
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    background: #fff;
    padding: 24px;
    /* 增加卡片内边距 */
}

.el-table {
    border: 1px solid #e6ebf5;
    border-radius: 4px;
}

.el-table__header th {
    background: #f5f7fa;
    border-bottom: 1px solid #e6ebf5;
    padding: 12px;
    /* 增加表头内边距 */
}

.el-table__cell {
    border-right: 1px solid #e6ebf5;
    padding: 12px;
    /* 增加表格单元格内边距 */
}

.el-table__cell:last-child {
    border-right: none;
}

.el-form-item {
    margin-bottom: 16px;
    /* 增加表单元素间距 */
}

.el-form-item__label {
    color: #606266;
    font-weight: 500;
    min-width: 90px;
    /* 增加标签宽度 */
}

.el-input,
.el-select {
    height: 40px;
    /* 增加输入框高度 */
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    width: 100%;
}

.el-button {
    border-radius: 4px;
    padding: 0 16px;
    /* 增加按钮内边距 */
    min-width: 80px;
    /* 增加按钮最小宽度 */
    height: 36px;
    /* 统一按钮高度 */
}

.report-actions {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
}

/* 响应式布局调整 */
@media (max-width: 1440px) {
    .left-section {
        padding: 24px;
    }

    .right-panel {
        width: 480px;
        padding: 24px;
    }

    .el-card {
        padding: 16px;
    }
}

@media (max-width: 1200px) {
    .main-content {
        flex-direction: column;
    }

    .left-section,
    .right-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e6ebf5;
    }
}
</style>